<template>
  <div class="search-wrap">
      <div>
      <div @click="backPick"> <van-icon name="arrow-left" /></div>
       
        <div>
            <van-search
            v-model="value"
            show-action
            placeholder="搜索你喜欢的宝贝"
            @search="onSearch"
            >
            <template #action>
                <div @click="onSearch">搜索</div>
            </template>
            </van-search>
        </div>
      </div>
      <div class="Boutique">
          <div>
            <img src="https://static.epetbar.com/static_wap/epetapp/pages/search/images/rmss.png" alt="">
          <p>精品推荐</p>
          </div>
          
      </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { Icon } from 'vant';

Vue.use(Icon);
export default {
    data(){
       return{
           value:''
       }
    },
    methods:{
        onSearch(){
            this.$router.push('/goodslists')
        },
        backPick(){
            this.$router.back()
        }
    }

}
</script>

<style lang="stylus" scoped>
.search-wrap
    height 100%
    >div:first-child
        height .5rem
        display flex
        justify-content space-around
        align-items center
        box-sizing border-box   
        >div:first-child
            width .4rem
            text-align center
            font-size .26rem
            color #ccc
            line-height .5rem
        >div:last-child
            flex 1
    >.Boutique
        height 1.3rem
        // background-color #ccc
        box-sizing border-box   
        div:first-child
            height .3rem
            display flex
            align-items center
            >img{
                height .2rem
                width .2rem
                margin 0 .1rem 0 .1rem
            }



</style>